<template>
	<view class="home">
		<!-- 轮播图区域 -->
		<swiper indicator-dots="true" circular="true" autoplay="true">
			<swiper-item v-for="(item,index) in swipers" :key="index">
				<image :src="item.url"></image>
			</swiper-item>
		</swiper>
		
		<!-- 导航区域 -->
		<view class="nav">
			<view class="nav-item" v-for="(item,index) in navs" :key="index" v-on:click="navigateTo(item.to)">
				<view :class="item.className"></view>
				<text>{{item.text}}</text>
			</view>
		</view>
		
		<!-- 推荐商品区域 -->
		<view class="hot_goods">
			<view class="recommend">商品推荐</view>
			<!-- 如下商品列表已封装成组件可供使用 -->
			<view class="goods_list">
				<view class="goods_item" v-for="item in products" :key="item.id" @click="gotoGoodsDetail(item.id)">
					<image :src="item.url"></image>
					<view class="price">
						<text>￥{{item.cPrice}}</text>
						<text>￥{{item.oPrice}}</text>
					</view>
					<view class="name">{{item.name}}</view>
				</view>
			</view>
			<view class="bottom" v-if=isBottomShow>
				—————————— 我是有底线的 ——————————
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				products: [],
				swipers: [
					{
						"url": "../../static/swaper/swapper1.jpg"
					},
					{
						"url": "../../static/swaper/swapper2.jpg"
					},
					{
						"url": "../../static/swaper/swapper3.jpg"
					}
				],
				navs: [
					{
						"className": "iconfont icon-chaoshi",
						"text": "超市",
						"to": "/pages/navs/market"
					},
					{
						"className": "iconfont icon-lianxi",
						"text": "联系",
						"to": "/pages/navs/contact"
					},
					{
						"className": "iconfont icon-xiangce",
						"text": "相册",
						"to": "/pages/navs/album"
					},
					{
						"className": "iconfont icon-shipin",
						"text": "视频",
						"to": "/pages/navs/vedio"
					}
				],
				isBottomShow: true
			}
		},
		onLoad() {
			this.products = [
				{
					"id": 1,
					"name": "华为荣耀Mate10全新上市潮流新机!全新上市潮流新机!全新上市潮流新机!",
					"cPrice": 2299,
					"oPrice": 3900,
					"url": '../../static/img/1.jpg'
				},
				{
					"id": 2,
					"name": "小米11高通骁龙777全能王游戏高手最爱!全能王游戏高手最爱!",
					"cPrice": 2145,
					"oPrice": 3650,
					"url": '../../static/img/2.jpg'
				},
				{
					"id": 3,
					"name": "Vivo全新IQOO5系列女神之手送礼最佳之选!送礼最佳之选!送礼最佳之选!",
					"cPrice": 2999,
					"oPrice": 3988,
					"url": '../../static/img/3.jpg'
				}
			];
		},
		methods: {
			navigateTo(path) {
				console.log("跳转到:", path);
				uni.navigateTo({
					url: path
				})
			},
			gotoGoodsDetail(id) {
				console.log("查看商品的详细信息:", id);
				uni.navigateTo({
					url:"goodsDetails/goodsDetails?id="+id
				})
			}
		},
		onReachBottom() {
			console.log("触底啦！");
		},
		onPullDownRefresh(){
			console.log("下拉刷新啦!");
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss">
	.home{
		swiper{
			width: 750rpx;
			height: 350rpx;
			image{
				height: 100%;
				width: 100%;
			}
		}
		.nav {
			display: flex;
			.nav-item {
				width: 25%;
				text-align: center;
				view {
					width: 120rpx;
					height: 120rpx;
					background: #b50e03;
					border-radius: 60rpx;
					margin: 10px auto;
					line-height: 120rpx;
					color: #fff;
					font-size: 50rpx;
				}
				text {
					font-size: 30rpx;
				}
			}
		}
		.hot_goods {
			background: #eee;
			overflow: hidden;
			margin-top: 10px;
			.recommend {
				height: 50px;
				line-height: 50px;
				color: #b50e03;
				text-align: center;
				letter-spacing: 20px;
				background: #fff;
				margin: 7rpx 0;
			}
		}
		.goods_list {
			padding: 0 15rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.goods_item {
				background: #fff;
				width: 355rpx;
				margin: 10rpx 0;
				padding: 15rpx;
				box-sizing: border-box;
				image {
					width: 100%;
					height: 150px;
					display: block;
					margin: auto;
				}
				.price {
					color: #b50e03;
					font-size: 36rpx;
					margin: 10rpx 0 5rpx 0;
					text:nth-child(2) {
						color: #ccc;
						font-size: 28rpx;
						margin-left: 17rpx;
						text-decoration: line-through;
					}
				}
				.name {
					font-size: 28rpx;
					line-height: 50rpx;
					padding-bottom: 15rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
		.bottom {
			width: 100%;
			height: 50;
			line-height: 50px;
			text-align: center;
			font-size: 22rpx;
			color: #ccc;
		}
	}
</style>
